import React, { memo, useState, useEffect } from 'react'
import { List, Skeleton, Divider ,Layout } from 'antd';
import { LikeOutlined, MessageOutlined } from '@ant-design/icons';
import InfiniteScroll from 'react-infinite-scroll-component';
import { useNavigate,useLocation } from 'react-router-dom';
import { getList } from '../../../api/searchlist';
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
const { Footer } = Layout;


const data = Array.from({
  length: 23,
}).map((_, i) => ({
  href: 'https://ant.design',
  title: `ant design part ${i}`,
  avatar: `https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png`,
  description:
    'Ant Design, a design language for background applications, is refined by Ant UED Team.',
  content:
    'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
}));



const list = memo(() => {
  const [dataarr,setDataarr]=useState([])
  let num = 0
  let paramsa={}
  console.log( '324234234234234',localStorage.getItem('params'))
  if(localStorage.getItem('params')==null){
    paramsa={
      category:1,
      page:1,
      pagesize:10,
      searchKey:'',
      state:null
    }
    localStorage.setItem('params',JSON.stringify(paramsa))
  }else{
    paramsa=JSON.parse(localStorage.getItem('params'))
  }
  
  // let paramsa=JSON.parse(params)
  // console.log('进入列表页面')
  console.log(paramsa)
  const getDateList=(paramsa) =>{
    console.log('进入列表页面')
      getList(paramsa).then(res=>{
        console.log('打印查询的页面',res.data.result.data)
        console.log(res.data.result.data)
        setDataarr(res.data.result.data)
      })
  }
 
  // getDateList(paramsa)
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  const loadMoreData = () => {
    if (loading) {
      return;
    }
    setLoading(true);
    fetch('https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo')
      .then((res) => res.json())
      .then((body) => {
        setData([...data, ...body.results]);
        setLoading(false);
      })
      .catch(() => {
        setLoading(false);
      });
  };
  const location = useLocation();
  useEffect(() => {
    // loadMoreData();
    getDateList(paramsa)
    console.log('路由变化了，当前路由是：', location.pathname);
  }, [location]);
  const navigate = useNavigate()
  const onDetail = (item) => {
    navigate('/home/article/details?id='+item.id)
  }
  return (
    <div className='list'>
      <InfiniteScroll
        dataLength={dataarr.length}
        next={loadMoreData}
        hasMore={dataarr.length < 50}
        loader={
          <Skeleton
            paragraph={{
              rows: 1,
            }}
            style={{
              textAlign: 'center'
            }}
            active
          />
        }
        endMessage={
          <div style={{ textAlign: 'center'}}>
              <Divider plain>没有更多数据了 🤐</Divider>
              <span style={{ textAlign: 'center',opacity:0.5 }}>BLOG ©{new Date().getFullYear()} Created by myself</span>
          </div>
        }
        scrollableTarget="scrollableDiv"
      >
        <List
          itemLayout="vertical"
          size="large"
          dataSource={dataarr}
          footer

          renderItem={(item) => (
            <>
              <List.Item
                key={item.title}
                onClick={() => onDetail(item)}
              >
                <div className='list-title'>
                  <div className='title'>{item.title}</div>
                  <div className='author'>{item.author}</div>
                </div>
                <div className='list-item'>
                  <div className='image'>
                    <img width={272} src={item.mainImage} alt='' />
                  </div>
                  <div className='list-item-right'>
                    {/* <div className='content' >{item.content}</div> */}
                    <Markdown remarkPlugins={[remarkGfm]}>{item.content}</Markdown>
                    <div className='icon-text'>
                      <span className='item'><LikeOutlined />{item.likeNum}</span>
                      <span className='item'><MessageOutlined />{item.reviewNum}</span>
                    </div>
                  </div>
                </div>

              </List.Item>

            </>
          )}
        />

      </InfiniteScroll>

    </div>
  )
})

export default list
